<template>
  <div class="home-box">
    <div class="header-top">
      <h1>植物园定向活动管理</h1>
      <!--<div class="score-box">
        <div class="score-display">
          <span>完成</span>
          <b>{{ finishNum }}</b>
        </div>
        <div class="score-display">
          <span>排名</span>
          <b>{{ ranking }}</b>
        </div>
      </div>-->
    </div>
    <timedown></timedown>
    <div class="col-box">
      <div class="switch-panel" >
        <button v-bind:class="{active: currentTabComponent==='scorelist'}"
        @click="switchTo('scorelist')">排行榜</button>
        <div class="panel-box">
          <div class="panel">
            <component v-bind:is="currentTabComponent"></component>
          </div>
        </div>
      </div>
      <div class="cell-panel">
        <h4><span>进展矩阵</span></h4>
        <a class="rule-btn" @click="$router.push({path: '/rule'})">活动规则</a>
        <matrix></matrix>
      </div>
      <div class="switch-panel" >
        <button class="active">任务审核</button>
        <div class="panel-box">
          <div class="panel">
            <component v-bind:is="'taskCheck'"></component>
          </div>
        </div>
      </div>
      <div class="switch-panel" style="max-width: 100%;width: 100%">
        <button class="active">任务日志</button>
        <div class="panel" style="position: relative;">
          <component v-bind:is="'worklog'"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import timedown from '@/components/time-down'
import matrix from '@/components/matrix'
import worklog from '@/components/worklog'
import scorelist from '@/components/scorelist'
import admin from '@/components/admin'
import taskCheck from '@/components/taskCheck'
export default {
  name: 'admin',
  components: {
    timedown,
    matrix,
    worklog,
    scorelist,
    taskCheck,
    admin
  },
  data () {
    return {
      groupName: '第一组',
      finishNum: 0,
      ranking: 1,
      currentTabComponent: 'scorelist'
    }
  },
  created () {
    this.getRanking()
  },
  methods: {
    switchTo: function (name) {
      this.currentTabComponent = name
    },
    getRanking: function () {
      this.$http.get('/server/index/getRanking')
        .then(function (res) {
          this.groupName = res.data.data.groupname
          this.finishNum = res.data.data.doneJonbs
          this.ranking = res.data.data.rank
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-box{
    position: relative;
    height: 100%;
    width: 100%;
    padding: 10px;
    background-image: url(../assets/longHomeBack.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .header-top{
    position: relative;
    background: rgba(255,255,255,0.58);
  }
  .header-top>h1{
    margin-right: 40%;
    padding-left: 10px;
    line-height: 50px;
    font-size: 24px;
    color: #10025a;
    text-align: left;
    font-weight: 700;
  }
  .score-box{
    position: absolute;
    right: 0;
    top:0;
    height: 100%;
    background: #181512;
    border:1px solid #797979;
  }
  .score-display{
    float: left;
    width: 60px;
    height: 100%;
    vertical-align: top;
  }
  .score-box>.score-display:first-child{
    border-right: 1px solid #797979;
  }
  .score-display>span{
    display: block;
    height: 40%;
    line-height: initial;
    color: #fff;
    font-size: 14px;
  }
  .score-display>b{
    display: block;
    height: 60%;
    line-height: initial;
    color: #FFCC00;
    font-size: 28px;
  }
  .cell-panel{
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
  }
  .cell-panel>h4{
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
  }
  .cell-panel>h4>span{
    display: inline-block;
    cursor: pointer;
    padding: 0 10px;
    margin-bottom: -1px;
    margin-right: -1px;
    transition-duration: 200ms;
    outline: none;
    border:none;
    font-size: 16px;
    line-height: 2em;
    color: #fff;
    font-weight: 600;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(135deg, #306, #000);
    text-align: left;
  }
  .switch-panel{
    position: relative;
    min-width: 200px;
    margin: 0 auto;
    padding: 10px 0;
    border-radius: 2px;
    font-size: 1.2em;
    line-height: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    box-sizing: border-box;
  }
  .switch-panel>button{
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    color: #868686;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
    background: linear-gradient(135deg, #000033, #000);
    transition-duration: 200ms;
    outline: none;
    border:none;
  }
  .switch-panel>button:first-child{
    margin-left: 5px;
  }
  .switch-panel>button.active{
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #306, #000);
  }
  .switch-panel>button:active{
    opacity: .9;
  }
  .panel{
    min-height: 60px;
    padding: 5px 10px;
    margin-top: -2px;
    background: rgba(255,255,255,0.58);
    border: 1px solid #000;
  }
  @media screen and (max-width: 600px) {
    .home-box{
      background-image: url(../assets/homeBack.png);
    }
  }
  .rule-btn{
    position: absolute;
    top: 1.2em;
    right: 10px;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    background: #FF3300;
    box-shadow: 0.01rem 0.01rem 0.1rem rgba(0, 0, 0, .5), 0 0 0.05rem rgba(240, 240, 240, .5), 0.05rem 0.05rem 0.01rem rgba(255, 255, 255, .15) inset, 0.1rem 0.1rem 0.1rem rgba(255, 255, 255, .05) inset, -0.05rem -0.05rem 0.15rem rgba(0, 0, 0, .15) inset, -0.1rem -0.05rem 0.15rem rgba(0, 0, 0, .05) inset;
    cursor: pointer;
    transition-duration: 200ms;
    vertical-align: middle;
  }
  .rule-btn:hover,.rule-btn:active{
    background: #ff1200;
  }
  .col-box{
    width: 100%;
    margin-bottom: 80px;
  }
  .col-box:after{
    content: "";
    display: block;
    clear: both;
  }
  @media screen and (min-width: 600px) {
    .col-box>div{
      width: 33.3%;
      margin: auto;
      float: left;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .panel-box{
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
    }
    .panel{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
    }
  }
</style>
